<%-- 
    Document   : registrarPresupuesto
    Created on : 08-21-2012, 12:27:56 AM
    Author     : Alex
--%>


<%@include file="/include/header.jsp" %>

<style>
    divGastos {width: 800px; margin:0 auto;}
    fieldset {
        border:1px solid #5C9AD7;
        width: 810px;
        margin:0 auto;
    }
    
    legend {
        padding: 0.2em 0.5em;
        border: 1px solid #5C9AD7;
        color: #366998;
        font-size: 14px;
        font-weight: bold;
        text-align: right;    
    }
</style>

<script type="text/javascript">

    function RegPres(){
        $( "#dialog:ui-dialog" ).dialog( "destroy" );
    
        $( "#dialog-confirm" ).dialog({
            resizable: false,
            height: 'auto',
            width: 490,
            modal: true,
            buttons: {
                Registrar: function() {
                    $( this ).dialog( "close" );
                    var form = document.getElementById("presupuestoForm");
                    form.submit();
                },
                Cancelar: function() {
                    $( this ).dialog( "close" );
                }
            }
        });
    }
    
    function verBeneficiados(idG) {
        var url = "./Presupuesto.jsa?cmd=initViewBenef&idG="+idG;
        window.open(url, "gastoWin", "HEIGHT=600, WIDTH=575, MODAL=YES, scrollBars=YES");
    }
    
</script>

<div class="content">
    
    <table class="tablePres">
        <tr>
            <th style="font-variant: small-caps">
                Presupuesto para <%= request.getAttribute("fecha") %>
            </th>
        </tr>
        <tr>
            <td>
                <p style="text-align: justify">
                    <logic:present name="text">
                        <logic:equal name="text" value="B">
                            Estos son todos los gastos presupuestados en este mes para el grupo actual de becarios y para los proyectos.
                        </logic:equal>
                        <logic:equal name="text" value="A">
                            Estos son los gastos registrados en este mes para el grupo actual de becarios y para los proyectos.
                            Por favor, rev&iacute;selo detenidamente para asegurarse que toda la informaci&oacute;n
                            est&eacute; correcta. Cuando termine, presione el bot&oacute;n "Registrar Presupuesto"
                            para guardar esta informaci&oacute;n.
                        </logic:equal>
                        <logic:equal name="text" value="C">
                            No hay gastos registrados en este mes para el grupo actual de becarios ni para los proyectos.
                            Puede utilizar las opciones <strong>Registrar gastos</strong> y <strong>Registrar gastos por proyecto</strong>
                            del men&uacute; <strong>Opciones Econ&oacute;micas</strong> para guardar los gastos del mes.
                        </logic:equal>
                    </logic:present>
                </p>
            </td>
        </tr>
        <tr>
            <td><br /></td>
        </tr>
    </table>

<fieldset>
    <legend>GASTOS POR BECARIOS</legend>    
    <div class="divGastos">
        <!-- GASTOS EN ESTADO REGISTRADO -->
        <logic:present name="gastosDataReg" scope="request">
            <div class="ui-widget-content ui-corner-all" style="width: 800px">
                <table class="tablePres">
                    <logic:present name="info">
                        <caption class="titleSeg">Gastos registrados en el Presupuesto</caption>
                    </logic:present>
                    <logic:notPresent name="info">
                        <caption class="titleSeg">Gastos a Registrar en el Presupuesto</caption>
                    </logic:notPresent>
                    <tr>
                        <td>
                            <display:table pagesize="10" name="gastosDataReg" requestURI="" class="results" style="width:90%;" id="results">
                                <display:column property="idGasto" title="No." style="text-align:center;" sortable="true"/>
                                <display:column property="monto" title="Monto" style="text-align:left;" sortable="true" />
                                <display:column property="total" title="Total" style="text-align:left;" sortable="true" />
                                <display:column property="concepto" title="Concepto" style="text-align:left" sortable="true" />
                                <display:column property="fechaReg" title="Registrado" style="text-align:left;" sortable="true" />
                                <display:column property="cantidadBecBenef" title="Beneficiados" style="text-align:center;" sortable="true" />
                                <display:column property="idGasto" title="Ver beneficiados" decorator="com.uca.sisbec.decorators.BeneficiadosDecorator" style="text-align:center;" sortable="true"/>
                            </display:table>
                            <script>
                                var table = document.getElementById("results");
                                var rows = table.getElementsByTagName("tr");
                                for (var i = 1; i < rows.length; i++) {
                                    rows[i].onmouseover = function() {
                                        this.className += ' hilite';
                                    }
                                    rows[i].onmouseout = function() {
                                        this.className = this.className.replace(' hilite', '');
                                    }
                                }
                            </script>
                        </td>
                    </tr>
                </table>
            </div>
        </logic:present>
        <!-- ************************** -->
        <br /><br /><br />
        <!-- GASTOS EN ESTADO CANCELADO -->
        <logic:present name="gastosDataCancel" scope="request">
            <div class="ui-widget-content ui-corner-all" style="width: 800px">
                <table class="tablePres">
                    <caption class="titleSeg">Gastos Anulados</caption>
                    <tr>
                        <td>
                            <display:table pagesize="5" name="gastosDataCancel" requestURI="" class="results" style="width:90%;" id="results2">
                                <display:column property="idGasto" title="No." style="text-align:center;" sortable="true"/>
                                <display:column property="monto" title="Monto" style="text-align:left;" sortable="true" />
                                <display:column property="total" title="Total" style="text-align:left;" sortable="true" />
                                <display:column property="concepto" title="Concepto" style="text-align:left" sortable="true" />
                                <display:column property="justificacionCambio" style="text-align:left;" title="Justificaci&oacute;n" sortable="true" />
                                <display:column property="fechaReg" title="Registrado" style="text-align:left;" sortable="true" />
                                <display:column property="fechaUltimoCambio" title="&Uacute;ltimo cambio" style="text-align:left;" sortable="true" />
                                <display:column property="usuarioUltimoCambio" title="Usuario" style="text-align:left;" sortable="true" />
                                <display:column property="cantidadBecBenef" title="Beneficiados" style="text-align:center;" sortable="true" />
                                <display:column property="idGasto" title="Ver beneficiados" decorator="com.uca.sisbec.decorators.BeneficiadosDecorator" style="text-align:center;" sortable="true"/>
                            </display:table>
                            <script>
                                var table = document.getElementById("results2");
                                var rows = table.getElementsByTagName("tr");
                                for (var i = 1; i < rows.length; i++) {
                                    rows[i].onmouseover = function() {
                                        this.className += ' hilite';
                                    }
                                    rows[i].onmouseout = function() {
                                        this.className = this.className.replace(' hilite', '');
                                    }
                                }
                            </script>
                        </td>
                    </tr>
                </table>
            </div>
        </logic:present>
        <!-- ************************** -->
        <br /><br /><br />
        <!-- GASTOS EN ESTADO ELIMINADO -->
        <logic:present name="gastosDataElim" scope="request">
            <div class="ui-widget-content ui-corner-all" style="width: 800px">
                <table class="tablePres">
                    <caption class="titleSeg">Gastos Eliminados</caption>
                    <tr>
                        <td>
                            <display:table pagesize="5" name="gastosDataElim" requestURI="" class="results" style="width:90%;" id="results3">
                                <display:column property="idGasto" title="No." style="text-align:center;" sortable="true"/>
                                <display:column property="monto" title="Monto" style="text-align:left;" sortable="true" />
                                <display:column property="total" title="Total" style="text-align:left;" sortable="true" />
                                <display:column property="concepto" title="Concepto" style="text-align:left" sortable="true" />
                                <display:column property="justificacionCambio" style="text-align:left;" title="Justificaci&oacute;n" sortable="true" />
                                <display:column property="fechaReg" title="Registrado" style="text-align:left;" sortable="true" />
                                <display:column property="fechaUltimoCambio" title="&Uacute;ltimo cambio" style="text-align:left;" sortable="true" />
                                <display:column property="usuarioUltimoCambio" title="Usuario" style="text-align:left;" sortable="true" />
                                <display:column property="cantidadBecBenef" title="Beneficiados" style="text-align:center;" sortable="true" />
                                <display:column property="idGasto" title="Ver beneficiados" decorator="com.uca.sisbec.decorators.BeneficiadosDecorator" style="text-align:center;" sortable="true"/>
                            </display:table>
                            <script>
                                var table = document.getElementById("results3");
                                var rows = table.getElementsByTagName("tr");
                                for (var i = 1; i < rows.length; i++) {
                                    rows[i].onmouseover = function() {
                                        this.className += ' hilite';
                                    }
                                    rows[i].onmouseout = function() {
                                        this.className = this.className.replace(' hilite', '');
                                    }
                                }
                            </script>
                        </td>
                    </tr>
                </table>
            </div>
        </logic:present>
        <!-- ************************** -->
    </div>
    </fieldset>
            
    <br /><br />
    
    <fieldset>
        <legend>GASTOS DE LOS PROYECTOS</legend>
        <div class="divGastos">
        <!-- GASTOS PROYECTO EN ESTADO REGISTRADO -->
        <logic:present name="gastosProyDataReg" scope="request">
            <div class="ui-widget-content ui-corner-all" style="width: 800px">
                <table class="tablePres">
                    <logic:present name="info">
                        <caption class="titleSeg">Gastos de Proyectos registrados en el Presupuesto</caption>
                    </logic:present>
                    <logic:notPresent name="info">
                        <caption class="titleSeg">Gastos de Proyectos a Registrar en el Presupuesto</caption>
                    </logic:notPresent>
                    <tr>
                        <td>
                            <display:table pagesize="10" name="gastosProyDataReg" requestURI="" class="results" style="width:90%;" id="results4">
                                <display:column property="idGastosProyecto" title="No." style="text-align:center;" sortable="true"/>
                                <display:column property="monto" title="Monto" style="text-align:left;" sortable="true" />
                                <display:column property="concepto" title="Concepto" style="text-align:left" sortable="true" />
                                <display:column property="fechaReg" title="Registrado" style="text-align:left;" sortable="true" />
                                <display:column property="nomCompletoProy" title="Proyecto" style="text-align:left;" sortable="true" />
                            </display:table>
                            <script>
                                var table = document.getElementById("results4");
                                var rows = table.getElementsByTagName("tr");
                                for (var i = 1; i < rows.length; i++) {
                                    rows[i].onmouseover = function() {
                                        this.className += ' hilite';
                                    }
                                    rows[i].onmouseout = function() {
                                        this.className = this.className.replace(' hilite', '');
                                    }
                                }
                            </script>
                        </td>
                    </tr>
                </table>
            </div>
        </logic:present>
        <!-- ************************** -->
        <br /><br /><br />
        <!-- GASTOS PROYECTOS EN ESTADO CANCELADO -->
        <logic:present name="gastosProyDataCancel" scope="request">
            <div class="ui-widget-content ui-corner-all" style="width: 800px">
                <table class="tablePres">
                    <caption class="titleSeg">Gastos Anulados</caption>
                    <tr>
                        <td>
                            <display:table pagesize="5" name="gastosProyDataCancel" requestURI="" class="results" style="width:90%;" id="results5">
                                <display:column property="idGastosProyecto" title="No." style="text-align:center;" sortable="true"/>
                                <display:column property="monto" title="Monto" style="text-align:left;" sortable="true" />
                                <display:column property="concepto" title="Concepto" style="text-align:left" sortable="true" />
                                <display:column property="justificacionCambio" style="text-align:left;" title="Justificaci&oacute;n" sortable="true" />
                                <display:column property="fechaReg" title="Registrado" style="text-align:left;" sortable="true" />
                                <display:column property="fechaUltimoCambio" title="&Uacute;ltimo cambio" style="text-align:left;" sortable="true" />
                                <display:column property="usuarioUltimoCambio" title="Usuario" style="text-align:left;" sortable="true" />
                                <display:column property="nomCompletoProy" title="Proyecto" style="text-align:left;" sortable="true" />
                            </display:table>
                            <script>
                                var table = document.getElementById("results5");
                                var rows = table.getElementsByTagName("tr");
                                for (var i = 1; i < rows.length; i++) {
                                    rows[i].onmouseover = function() {
                                        this.className += ' hilite';
                                    }
                                    rows[i].onmouseout = function() {
                                        this.className = this.className.replace(' hilite', '');
                                    }
                                }
                            </script>
                        </td>
                    </tr>
                </table>
            </div>
        </logic:present>
        <!-- ************************** -->
        <br /><br /><br />
        <!-- GASTOS PROYECTOS EN ESTADO ELIMINADO -->
        <logic:present name="gastosProyDataElim" scope="request">
            <div class="ui-widget-content ui-corner-all" style="width: 800px">
                <table class="tablePres">
                    <caption class="titleSeg">Gastos Eliminados</caption>
                    <tr>
                        <td>
                            <display:table pagesize="5" name="gastosProyDataElim" requestURI="" class="results" style="width:90%;" id="results6">
                                <display:column property="idGastosProyecto" title="No." style="text-align:center;" sortable="true"/>
                                <display:column property="monto" title="Monto" style="text-align:left;" sortable="true" />
                                <display:column property="concepto" title="Concepto" style="text-align:left" sortable="true" />
                                <display:column property="justificacionCambio" style="text-align:left;" title="Justificaci&oacute;n" sortable="true" />
                                <display:column property="fechaReg" title="Registrado" style="text-align:left;" sortable="true" />
                                <display:column property="fechaUltimoCambio" title="&Uacute;ltimo cambio" style="text-align:left;" sortable="true" />
                                <display:column property="usuarioUltimoCambio" title="Usuario" style="text-align:left;" sortable="true" />
                                <display:column property="nomCompletoProy" title="Proyecto" style="text-align:left;" sortable="true" />
                            </display:table>
                            <script>
                                var table = document.getElementById("results6");
                                var rows = table.getElementsByTagName("tr");
                                for (var i = 1; i < rows.length; i++) {
                                    rows[i].onmouseover = function() {
                                        this.className += ' hilite';
                                    }
                                    rows[i].onmouseout = function() {
                                        this.className = this.className.replace(' hilite', '');
                                    }
                                }
                            </script>
                        </td>
                    </tr>
                </table>
            </div>
        </logic:present>
        <!-- ************************** -->
    </div>
    </fieldset>
            
    <table class="tablePres">
        <logic:present name="msg">
            <tr>
                <td><br /></td>
            </tr>
            <tr>
                <td class="success">
                    <html:img src="./images/ok.png" />&nbsp;
                    <html:messages id="mensaje" name="msg">
                        <bean:write name="mensaje" />
                    </html:messages>
                </td>
            </tr>
        </logic:present> <!-- Cierre del Logic de mensajes -->
        <logic:present name="errors">
            <tr>
                <td><br /></td>
            </tr>
            <tr>
                <td class="errors">
                    <html:img src="./images/error.png" />&nbsp;<html:errors name="errors" /><%= request.getAttribute("fecha") %>
                </td>
            </tr>
        </logic:present> <!-- Cierre del Logic de errores -->
        <logic:present name="info">
            <tr>
                <td><br /></td>
            </tr>
            <tr>
                <td class="information">
                    <html:img src="./images/info.png" />&nbsp;
                    <html:messages id="information" name="info">
                        <bean:write name="information" /><%= request.getAttribute("fecha") %>
                    </html:messages>
                </td>
            </tr>
        </logic:present> <!-- Cierre del Logic de mensajes -->
    </table>

    <!-- BOTON Y MENSAJE MODAL -->
    <logic:present name="drawbutton">
        <logic:equal name="drawbutton" value="YES">
            <table class="tablePres">
                <html:form action="/Presupuesto" styleId="presupuestoForm">
                    <html:hidden property="cmd" value="RegistrarPresupuesto" />
                <tr>
                    <td><br /></td>
                </tr>
                <tr>
                    <td style="text-align: center">
                        <p>
                            <html:button value="Registrar Presupuesto" property="presupuesto" styleId="btnRegPres" styleClass="button" onclick="RegPres();" />
                        </p>
                    </td>
                </tr>
                </html:form>
            </table>
        </logic:equal>
    </logic:present>
    
    <!-- DIV DE MENSAJE DE CONFIRMACION -->
    <div style="height: 75px; display: none" id="dialog-confirm" title="&iquest;Registrar Presupuesto?">
        <table style="font-size: 13px;">
            <tr>
                <td><img src="./images/Warning.png" alt="Atenci&oacute;n" /></td>
                <td style="text-align: justify">Est&aacute; a punto de registrar el presupuesto mensual de becarios y proyectos. Esta operaci&oacute;n no se puede revertir. &iquest;Est&aacute; seguro que desea continuar?</td>
            </tr>
        </table>
    </div>
    <!-- ****************************** -->
    <br /><br />
</div>
<%@include file="/include/footer.jsp" %>